<template>
  <div class="raw_material_data">
    <one-title :title="titleText" @refreshData="refresh"></one-title>
    <div class="fixed_top_56">
      <el-form @submit.native.prevent>
        <div class="multiple_search">
          <div class="search_item">
            <div class="select_label">
              物料编码：
            </div>
            <div class="search_wrapper">
              <el-input
                v-model="rawMaterialNumber"
                placeholder="请输入完整的物料编码"
                size="small"
              ></el-input>
            </div>
          </div>
          <div class="mes_btn">
            <el-button
              type="primary"
              native-type="submit"
              icon="el-icon-search"
              class="search_btn"
              @click="_info">
            </el-button>
          </div>
        </div>
      </el-form>
      <div class="data_container" v-if="isSearch">
        <div class="material_info">
          <div class="material_title_info">
            <span class="material_title_item"><i class="label_icon"></i>物料编码：{{template.number}}</span>
            <span class="material_title_item"><i class="label_icon"></i>物料名称：{{template.name}}</span>
          </div>
          <div class="mes_btn">
            <el-button @click="handleExport">
              <i class="iconfont icon-btn_export"></i>
              导出
            </el-button>
            <disabled-btn :judge="deleteJudge"
                          iconClass="iconfont icon-btn_delete"
                          btnText="删除"
                          @judgeClick="handleDelete"></disabled-btn>
            <disabled-btn :judge="editJudge"
                          iconClass="iconfont icon-btn_edit"
                          btnText="修改"
                          @judgeClick="handleEdit"></disabled-btn>
            <el-button type="success" @click="handleAdd">
              <i class="iconfont icon-btn_addnew"></i>
              添加记录
            </el-button>
          </div>
        </div>
        <div class="table_container">
          <el-table
            border
            stripe
            v-loading="isLoading"
            style="width: 100%"
            ref="mesTable"
            :data="rawMaterialData"
            :max-height="tableMaxHeight"
            :row-class-name="({row}) => !selectData.some((item) => item.id === row.id) || 'line_selected'"
            @selection-change="handleSelectionChange"
            @row-click="row => $refs.mesTable.toggleRowSelection(row)"
            @sort-change="_sort">
            <el-table-column
              type="selection"
              fixed="left"
              width="40">
            </el-table-column>
            <el-table-column
              fixed="left"
              label="采购批次号"
              prop="purchaseNumber"
              show-overflow-tooltip
              sortable="custom"
              min-width="100">
            </el-table-column>
            <el-table-column
              v-for="(item, index) in listNum"
              :key="item"
              :label="item"
              show-overflow-tooltip
              min-width="80">
              <template slot-scope="scope">
                {{scope.row.propertyValue[index] ? scope.row.propertyValue[index].value: ''}}
              </template>
            </el-table-column>
          </el-table>
        </div>
        <mes-pagination
          @updateData="init"
          :currentPage="listData.pageNo"
          :total="listData.count || 0"
          :pageSize="listData.pageSize">
        </mes-pagination>
      </div>
      <div class="empty" v-else>
        <div>
          <img class="empty_img" src="@/assets/img/pic_default_empt_search.png" alt="">
          <p class="empty_msg">请精确搜索已存在的物料编码</p>
        </div>
      </div>
    </div>
    <add-data ref="AddData" @saveSuccess="init"></add-data>
    <edit-raw-item ref="EditRawItem" @saveSuccess="init"></edit-raw-item>
  </div>
</template>

<script>
import AddData from './components/AddData'
import EditRawItem from './components/EditRawItem'

export default {
  name: 'RawMaterialData',
  components: {
    AddData,
    EditRawItem
  },
  data() {
    return {
      titleText: '原材料数据记录', // 模块名称
      isLoading: false, // 加载中
      isSearch: false, // 是否搜索到结果
      sortData: {}, // 排序对象
      rawMaterialNumber: '', // 搜索的物料编码
      selectData: [], // 行选中列表
    }
  },
  computed: {
    // 列表数据
    listData() {
      return this.$store.state.rawMaterialData.listData.page || {}
    },
    // 表格数据
    rawMaterialData() {
      let list = this.listData.list || []
      list.map(item => {
        item.propertyValue = item.propertyValue ? JSON.parse(item.propertyValue) : []
      })
      return list
    },
    // 模板数据
    template() {
      return this.$store.state.rawMaterialData.listData.template || {}
    },
    // 模板字段个数
    listNum() {
      let tem = this.template.template || ''
      return tem ? tem.split(',') : []
    },
    // 删除判断
    deleteJudge() {
      if (!this.selectData.length) return {msg: '请选择需要删除的记录！'}
      return {msg: false}
    },
    // 编辑判断
    editJudge() {
      if (!this.selectData.length) return {msg: '请选择需要编辑的记录！'}
      if (this.selectData.length > 1) return {msg: '只能选中一条记录编辑！', disabled: true}
      return {msg: false}
    },
  },
  methods: {
    // 刷新
    refresh() {
      this.rawMaterialNumber = ''
      this.init()
    },
    // 初始化
    init(page) {
      this.isLoading = true
      let pageObj = page || {
        pageNo: 1,
        pageSize: this.listData.pageSize || 15
      }
      this.$store.dispatch('saveData', {
        url: 'a/rawmaterial/rawMaterial/selectRawMaterialByNumber',
        method: 'post',
        data: {
          pageNo: pageObj.pageNo,
          pageSize: pageObj.pageSize,
          number: this.rawMaterialNumber,
          sort: this.sortData,
        },
        module: 'rawMaterialData',
        state: 'listData'
      }).then(res => {
        this.isSearch = !!res.template
        if (!res.template && this.rawMaterialNumber) {
          this.$message({
            type: 'error',
            message: '该物料编码不存在',
            duration: 1500,
            center: true
          })
        }
      }).catch(() => {
        this.isSearch = false
      }).finally(() => {
        this.isLoading = false
      })
    },
    // 搜索回调
    _info() {
      if (!this.rawMaterialNumber) return
      this.init()
    },
    // 复选框
    handleSelectionChange(val) {
      this.selectData = val
    },
    // 导出
    handleExport() {
      let postData = {number: this.rawMaterialNumber}
      this.$exportTable(postData, 'a/rawmaterial/rawMaterial/exportasexcel', this.titleText)
    },
    // 删除
    handleDelete() {
      this.confirmDelete().then(() => {
        let postData = {
          method: 'post',
          url: 'a/rawmaterial/rawMaterial/deleteBatch',
          data: {
            rawMaterialList: this.selectData.reduce((pre, cur) => [...pre, {id: cur.id}], [])
          },
          noCommit: true
        }
        this.$store.dispatch('saveData', postData).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功',
            duration: 1500,
            center: true
          })
          this.init(this.listData)
        })
      })
    },
    // 修改
    handleEdit() {
      this.$refs.EditRawItem.openDialog(this.template.id, this.selectData[0])
    },
    // 新增
    handleAdd() {
      this.$refs.AddData.openDialog(this.template.id, this.listNum.length)
    },
    // 排序
    _sort(obj) {
      this.sortData = this.$getSortOrder(obj)
      this.init()
    },
  }
}
</script>

<style scoped lang="less">
  .raw_material_data{
    .data_container{
      padding-bottom: 40px;
    }
    .material_info{
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 70px;
      margin: 0 20px 20px;
      padding: 0 20px;
      box-sizing: border-box;
      background-color: #f0f8ff;
      border: solid 1px #a7e3ff;
      .material_title_item{
        height: 20px;
        &+.material_title_item{
          margin-left: 40px;
        }
        .label_icon{
          display: inline-block;
          width: 10px;
          height: 10px;
          background-color: #00b4ff;
          border-radius: 50%;
          vertical-align: middle;
          margin-right: 8px;
        }
      }
    }
    .empty{
      height: calc(100% - 72px);
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 200px;
      text-align: center;
      .empty_img{
        width: 120px;
      }
      .empty_msg{
        font-size: 14px;
        color: #a1b1c1;
        line-height: 60px;
      }
    }
  }
</style>
